<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
	<ul>
		<li id="cloth">衣服</li>
		<li>裤子</li>
		<li>裤衩子</li>
		<li>袜子</li>
	</ul>
	<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//1.什么事DOM对象(js对象):使用js的方式获取到的元素就是js对象(DOM对象)
// 			var cloth = document.getElementById("cloth");
// 			cloth.style.backgroundColor = "pink";
			
			//2.什么是jq对象:使用jq的方式获取到的元素就是jQuery对象
// 			var $li = $("li");
// 			console.log($li);
// 			$li.text("我改了内容");
			
			
			//3.jQuery对象与js对象的区别
			//js对象,对象不能调用jq对象的方法
			// var cloth = document.getElementById("cloth");
			// cloth.text("呵呵");
			// cloth.innerHTML = "呵呵";
			
			//4.jq对象与js对象的联系(jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆js对象) (宏观上)
			
			//jQuery对象能不能调用DOM对象的方法
// 			var $li = $("li");
// 			$li[0].setAttribute("name","hehe");

			//DOM无法调用jQuery对象的方法:为什么:
			// 因为是两个不同的对象
			//DOM对象调用jQuery对象的方法.需要把DOM对象转换成jQuery对象.
			var cloth = document.getElementById("cloth");
			
			//DOM对象就变成jQuery对象
			// $(cloth).text("呵呵");
			
			//jQuery对象怎么转换成DOM对象(取出来)
			var $li = $("li");
			$li[1].style.backgroundColor = "red";
			$li.get(2).style.backgroundColor = "yellow";
			
			//1.什么是DOM对象:用js的方式获取到的对象是DOM对象
			//2.jQuery对象: 用jq获取到的对象是jq对象
			//3.区别与联系
			//4.区别:js对象与jq对象的方法不能混着用
			//5.联系:
			//DOM-->jQuery   $()
			//jQuery-->DOM   $li[0]   $li.get(0)
		});
		
	</script>
	</body>
</html>